<!-- index.html 新增的UI部分 -->
<div>
    <div id="app">
        <div class="converter-section">
            <ui-prop-group>
                <ui-prop>
                    <ui-label slot="label">Excel文件路径</ui-label>
                    <ui-input slot="content" readonly :value="excelFilePath" placeholder="请选择Excel文件"></ui-input>
                    <ui-button slot="content" @click="selectExcelFile">浏览...</ui-button>
                </ui-prop>

                <ui-prop>
                    <ui-label slot="label">输出路径</ui-label>
                    <ui-input slot="content" v-model="jsonOutputPath" readonly></ui-input>
                </ui-prop>
            </ui-prop-group>

            <ui-prop-group>
                <!-- 新增跳过行数设置 -->
                <ui-prop>
                    <ui-label slot="label">跳过行数</ui-label>
                    <ui-input slot="content" type="number" v-model.number="skipRows" min="0" step="1"
                        @confirm="onConfirm"></ui-input>
                </ui-prop>
                <ui-prop>
                    <ui-label slot="label">第一行作表头</ui-label>
                    <ui-checkbox slot="content" :checked="useHeader" @confirm="handleHeaderConfirm"></ui-checkbox>
                </ui-prop>

                <!-- 修改文件路径选择 -->
                <ui-prop>
                    <ui-label slot="label">输出文件</ui-label>
                    <ui-input slot="content" v-model="jsonFileName" placeholder="输入文件名"></ui-input>
                    <ui-button slot="content" @click="selectOutputFile">选择路径</ui-button>
                </ui-prop>
            </ui-prop-group>

            <div style="margin: 20px 0; text-align: center;">
                <ui-button type="primary" @confirm="convertToJson" :disabled="!excelFilePath">
                    <ui-icon name="execute"></ui-icon>
                    开始转换
                </ui-button>
            </div>

            <!-- 预览区域 -->
            <ui-panel class="preview-panel">
                <ui-label>数据预览_前1000字符：</ui-label>
            </ui-panel>
            <pre class="preview-content">{{ previewData || '暂无预览数据' }}</pre>
        </div>
    </div>
</div>